<template>
	<view class="content">
		<view class="main">

			<view class="menu_name">姓名</view>
			<view style="display: flex;align-items: center;">
				<input class="et_wb_num" placeholder="请输入姓名" maxlength="50" :value="order_sn" @input="onInputOrder" />
			</view>

			<view class="menu_name">手机号</view>
			<view style="display: flex;align-items: center;">
				<input class="et_wb_num" placeholder="请输入手机号" maxlength="50" :value="order_sn" @input="onInputOrder" />
			</view>

			<view class="menu_name">门头地址</view>
			<view style="display: flex;align-items: center;">
				<input class="et_wb_num" placeholder="请输入手机号" maxlength="50" :value="order_sn" @input="onInputOrder" />
			</view>

			<view class="menu_name">随行人数</view>
			<view style="display: flex;align-items: center;">
				<input class="et_wb_num" placeholder="请输入手机号" maxlength="50" :value="order_sn" @input="onInputOrder" />
			</view>

			<!-- <view class="menu_name">站点</view>
			<view class="yc_reason" @click="onSelReason">
				<view>{{reason.name || '点击选择站点'}}</view>
				<view> ▼ </view>
			</view> -->

			<!-- <view class="menu_name">备注</view>
			<textarea class="et_desc" placeholder="请输入备注（选填）" @input="onInputDesc" /> -->

			<view class="btn_ok" @click="onOk">提交报名信息</view>
			<!-- <view class="btn_ok_2" @click="onOk">微信一键登录</view> -->

		</view>

		<!-- 展示弹窗 -->
		<uni-popup ref="popup" type="center" :is-mask-click="true">
			<view class="pop_div">
				<view style="display: flex;justify-content: space-between;text-align: center;width: 100%;height: 80rpx;">
					<view style="width: 20%;line-height: 80rpx;color: #aaa;" @click="onClosePop(0)">取消</view>
					<view style="width: 60%;line-height: 80rpx;">选择站点</view>
					<view style="width: 20%;line-height: 80rpx;color: deepskyblue;" @click="onClosePop(1)">确定</view>
				</view>
				<picker-view style="height: 400rpx;width: 100%;text-align: center;" @change="onPickerChange">
					<picker-view-column>
						<view v-for="(item,index) in reason_list">{{item.name}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</uni-popup>

	</view>
</template>

<script src="../../util/ext/jweixin-1.6.0"></script>
<script>
	window.jWeixin = window.wx
	delete window.wx
	import { getUInfo, isZhuijia } from '@/util/util.js'
	import { chooseAndUploadImg, chooseAndUploadVideo } from '@/util/uni_util.js'
	export default {
		data() {
			return {
				order_sn: '', // 运单号
				query_num: '', // 查货单号
				detail: {}, // 运单详情

				img_list: [], // 选择的照片
				video_url: '', // 选择的视频

				reason_list: [], // 异常原因
				reason: {}, // 当前选择的原因
				reason_index: 0, // 当前原因索引

				desc: '', // 描述
			}
		},

		onLoad(opts) {
			let id = opts.id
			if (!id) {
				uni.showModal({
					title: '提示',
					content: res.msg,
					confirmText: '继续上报',
					cancelText: '退出',
					success: (res) => {
						if (res.confirm) {

						} else {
							uni.switchTab({ url: '/pages/index/index' })
						}
					}
				})
			}
			// 扫码
			uni.$on('onGetQrCode', (data) => {
				let { qr_code, od_num, startCity, toCity, goods } = JSON.parse(data.qr_code_data)
				this.order_sn = od_num
				this.query_num = qr_code
				this.detail = { startCity, toCity, goods }
				console.log('this.detail  = ', this.detail);
			})
		},

		onUnload() {
			uni.$off('onGetQrCode', () => {})
		},

		methods: {

			onWxLogin() {
				wx.config({
					debug: false, // 是否开启调试模式
					appId: 'wx710ec0311767dd6b', // 公众号的唯一标识
					timestamp: 'Your Timestamp', // 生成签名的时间戳
					nonceStr: 'Your NonceStr', // 生成签名的随机字符串
					signature: 'Your Signature', // 签名
					jsApiList: ['checkJsApi', 'chooseWXPay', 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', 'onMenuShareTimeline', 'getLocation',
						'openLocation', 'hideMenuItems'
					] // 需要使用的JS接口列表
				})
			},

			// 监听:输入描述
			onInputDesc(e) {
				this.desc = e.detail.value
			},
			// 监听:输入单号
			onInputOrder(e) {
				this.order_sn = e.detail.value
				if (!this.order_sn) {
					this.detail = {}
				}
			},
			onClosePop(isConfirm) {
				if (isConfirm == 1) {
					this.reason = this.reason_list[this.reason_index]
				}
				this.$refs.popup.close()
			},
			// 监听:选择原因的picker变化
			onPickerChange(e) {
				// console.log('onPickerChange = ', e.detail.value[0]);
				this.reason_index = e.detail.value[0]
			},
			// 选择原因
			onSelReason() {
				this.reason_index = 0
				this.$refs.popup.open('center')
			},

			// 提交上报
			onOk() {
				if (!this.order_sn) {
					uni.showToast({ icon: 'none', title: '请输入姓名' })
					return
				}
				if (!this.desc) {
					uni.showToast({ icon: 'none', title: '请输入手机号' })
					return
				}
				if (!this.reason || !this.reason.name) {
					uni.showToast({ icon: 'none', title: '请选择站点' })
					return
				}
				if (!this.img_list || this.img_list.length <= 0) {
					uni.showToast({ icon: 'none', title: '请上传照片' })
					return
				}

				if (isZhuijia(getUInfo())) {
					console.log('追加异常信息');
				}

				uni.showModal({
					title: '提示',
					content: '确认上报以上信息？',
					success: (res) => {
						res.confirm && this.uploadAbnormal()
					}
				})
			},

			// 接口:异常原因
			async getReason() {
				let that = this
				let token = getUInfo().token
				// uni.showLoading({ title: '加载中..', mask: true, })
				let res = await that.$getReason({})
				// console.log('getReason.res = ', res);
				if (res.code == 1) {
					this.reason_list = res.data
					this.reason = this.reason_list[0]
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			// 接口:查询运单
			async getOrder() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '查询中..', mask: true, })
				let res = await that.$getOrder({ token, order_sn: this.order_sn })
				console.log('getOrder.res = ', res);
				if (res.code == 1) {
					this.detail = res.data
					let order_str = JSON.stringify(res.data)
					uni.setStorageSync('order_detail', order_str)
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

			// 接口:上报异常
			async uploadAbnormal() {
				let that = this
				let token = getUInfo().token
				uni.showLoading({ title: '上报中..', mask: true, })
				let img = this.img_list.join(',')
				let order_sn = this.order_sn
				let video = this.video_url
				let query_num = this.query_num
				let describe = this.desc
				let reason = this.reason.name
				let res = await that.$uploadAbnormal({ token, order_sn, reason, describe, img, video, query_num })
				console.log('uploadAbnormal.res = ', res);
				if (res.code == 1) {
					uni.showModal({
						title: '提示',
						content: res.msg,
						confirmText: '继续上报',
						cancelText: '退出',
						success: (res) => {
							if (res.confirm) {

							} else {
								uni.switchTab({ url: '/pages/index/index' })
							}
						}
					})
				} else {
					uni.showToast({ title: res.msg, icon: 'none' })
				}
			},

		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		position: relative;
		min-height: 100vh;
		background-color: #6974DD;
	}

	.main {
		display: flex;
		flex-direction: column;
		margin: 24rpx;
		background-color: white;
		border-radius: 24rpx;
		padding: 24rpx;
	}

	.menu_name {
		margin: 36rpx 0 0 0;
		display: flex;
		align-items: center;
	}

	.sub_menu_name {
		margin: 12rpx 0 0 0;
	}

	.order_div {
		padding: 24rpx;
		background: white;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 12rpx 0 0 0;
	}

	.et_wb_num {
		flex-grow: 1;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 24rpx 0 0 0;
		padding: 0 24rpx 0 24rpx;
	}

	.btn_wb {
		width: 25%;
		height: 76rpx;
		line-height: 76rpx;
		color: white;
		text-align: center;
		font-size: 28rpx;
		margin: 24rpx 0 0 0;
		border-radius: 12rpx;
		background: #6974DD;
		margin: 24rpx 0 0 12rpx;
	}

	.et_desc {
		width: calc(100% - 48rpx);
		height: 100rpx;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 24rpx 0 0 0;
		padding: 24rpx;
	}

	/* 选择异常原因 */
	.yc_reason {
		display: flex;
		justify-content: space-between;
		height: 76rpx;
		line-height: 76rpx;
		border-radius: 12rpx;
		border: solid 1rpx #ccc;
		margin: 24rpx 0 0 0;
		padding: 0 24rpx 0 24rpx;
	}

	.item_sel_img {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin: 12rpx 0 12rpx 0;
	}

	.sel_img_div {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 选择的照片 */
	.sel_img {
		width: 132rpx;
		height: 132rpx;
		margin: 16rpx 0 0 16rpx;
		border: solid 1rpx #999;
		border-radius: 12rpx;
	}

	.sel_img_del {
		padding: 6rpx;
		color: orangered;
		margin: 0 0 0 16rpx;
	}

	.btn_sel_media {
		width: 300rpx;
		height: 66rpx;
		line-height: 66rpx;
		font-size: 28rpx;
	}

	.btn_ok {
		height: 88rpx;
		line-height: 88rpx;
		color: white;
		text-align: center;
		font-size: 30rpx;
		margin: 48rpx 0 0 0;
		border-radius: 888rpx;
		background: #6974DD;
	}

	.btn_ok_2 {
		height: 88rpx;
		line-height: 88rpx;
		color: white;
		text-align: center;
		font-size: 30rpx;
		margin: 24rpx 0 0 0;
		border-radius: 888rpx;
		background: #6974DD;
	}

	/* pop弹窗样式 */
	.pop_div {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 75vw;
		background-color: white;
	}
</style>